wo<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <script src="../../api/member.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../js/echarts.min.js"></script>
</head>
<body>
<div class="dashboard-container" id="category-app">
    <div style="float: left">
        <template>
            <el-select v-model="selectedOption" placeholder="请选择">
                <el-option
                        v-for="(key,value) in options"
                        :key="value"
                        :label="value"
                        :value="value">
                </el-option>
            </el-select>
        </template>
    </div>
    <div class="block" style="float: left">
        <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
        </el-date-picker>
        <el-button type="primary" @click="getNextDaysInfoByTeam()">查询</el-button>
    </div>
    <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="项目名称">{{ name }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ leaderName }}</el-descriptions-item>
        <el-descriptions-item label="成员">
                <span v-for="item in member">
                    {{ item  }} &nbsp;&nbsp;
                </span>
        </el-descriptions-item>
        <el-descriptions-item label="项目成立日期">
            <el-tag size="small">{{ createTime }}</el-tag>
        </el-descriptions-item>
    </el-descriptions>

    <div id="zhu" style="height: 400px;width: 1200px;"></div>
    <div id="main" style="height: 450px;"></div>
    <div id="nextDays" style="height: 400px;width: 1200px;"></div>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/category.js"></script>
<script>
    new Vue({
        el: '#category-app',
        data() {
            return {
                id: '',
                member: [],
                leaderName: '',
                createTime: '',
                name: '',
                options: new Map(),
                z_options: new Map(),
                selectedOption: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: ''
            }
        },
        mounted() {
            this.draw()
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                this.id = requestUrlParam('id')
                getProjectDto(this.id).then(res => {
                    this.name = res.data.name
                    this.member = res.data.member
                    const date = new Date(res.data.createTime); // 使用构造函数创建一个新的 Date 实例
                    const year = date.getFullYear(); // 获取年份
                    const month = date.getMonth() + 1; // 获取月份（注意月份从 0 开始，所以需要加 1）
                    const day = date.getDate(); // 获取日期
                    this.createTime = `${year}-${month}-${day}`
                    this.leaderName = res.data.leaderName
                    this.options = res.data.schemeMap
                })
            },
            draw() {
                axios.get(`/scheme/showScheme/${this.id}`).then(res => {
                    const title = []
                    const value = []
                    let json = res.data.data
                    for (let key in json) {
                        title.push(key)
                        value.push(json[key])
                    }
                    let dom = document.getElementById('zhu');
                    let chart = echarts.init(dom);
                    let myoption;
                    myoption = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: title,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'Direct',
                                type: 'bar',
                                barWidth: '60%',
                                data: value
                            }
                        ]
                    };
                    myoption && chart.setOption(myoption);
                })

            },
            getNextDaysInfoByTeam() {
                const params = {
                    'id': this.id,
                    'dates': this.value2
                }
                axios.post('/scheme/getNextDaysInfoByTeam', params).then(res => {
                    let arr = res.data.data
                    let title = []
                    let value = []
                    for (let i = 0; i < arr.length; i++) {
                        title.push(arr[i].schedule)
                        value.push(arr[i].rate)
                    }
                    let dom = document.getElementById('nextDays');
                    let chart = echarts.init(dom);
                    let myoption;
                    myoption = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: title,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'Direct',
                                type: 'bar',
                                barWidth: '60%',
                                data: value
                            }
                        ]
                    };
                    myoption && chart.setOption(myoption);
                })
            }
        },
        watch: {
            selectedOption(key) {
                const params = {'key': key, 'id': this.id}
                axios.post('/scheme/getInfoByTeam/', params).then(res => {
                    let title = []
                    let value = []
                    for (var i = 0; i < res.data.data.length; i++) {
                        title[i] = res.data.data[i].rate
                        const date = new Date(res.data.data[i].belongTime); // 使用构造函数创建一个新的 Date 实例
                        const year = date.getFullYear(); // 获取年份
                        const month = date.getMonth() + 1; // 获取月份（注意月份从 0 开始，所以需要加 1）
                        const day = date.getDate(); // 获取日期
                        value[i] = `${year}-${month}-${day}`;
                    }
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        xAxis: {
                            type: 'category',
                            data: value
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: title,
                                type: 'line'
                            }
                        ]
                    };
                    option && myChart.setOption(option);
                })
            }
        }
    })
</script>
</html>